import React,{Component} from 'react';
import styles from  './sass/other.scss';
import CSSModules from 'react-css-modules';
import axios from 'axios';

import Recnav from './Recnav';
//import jpg1 from '/static/images/ico1_privilege.gif';
class Recother extends Component{
  constructor(){
    super();
    this.state={
    varList:[],
    fashionList:[],
    entList:[]
    }
  }
  //综艺
  getVarList(){
    axios({
      url:'http://47.92.98.104:8080/zhuiying/category',
      method:'post',
      params:{pname:'科幻片'}
    }).then(res=>{
      //console.log(res.data);
      this.setState({
        varList:res.data
      });
    })

  }
  //时尚
  getFashionList(){
    axios({
      url:'http://47.92.98.104:8080/zhuiying/category',
      method:'post',
      params:{pname:'喜剧片'}
    }).then(res=>{
      //console.log(res.data);
      this.setState({
        fashionList:res.data
      });
    })

  }
  //娱乐
  getEntList(){
    axios({
      url:'http://47.92.98.104:8080/zhuiying/category',
      method:'post',
      params:{pname:'爱情片'}
    }).then(res=>{
      //console.log(res.data);
      this.setState({
        entList:res.data
      });
    })

  }

  componentDidMount(){
    this.getVarList();//综艺
    this.getFashionList();//时尚
    this.getEntList();//娱乐


  }

  //综艺
  getVariety=()=>{
     var jsx=[];
     var data=this.state.varList;
     var len=0;
     if(data.length>9){
       len=9;
     }else{
       len=data.length;
     }
     for(var i=0;i<len;i++){
     if(i>=1){
      jsx.push(
        <li key={i}>
            <a href="#">
              <div>
                <img src={data[i].cimage}/>
              </div>
              <div>
                <p>{data[i].cname}</p>
                <span>{data[i].cnation}</span>
              </div>
              </a>
          </li>
      )
     }
     }

     return jsx;
   }
   //综艺的第一张图
   getOne(){
    var jsx=[];
    var data=this.state.varList;
    var len=0;
    if(data.length>9){
      len=9;
    }else{
      len=data.length;
    }
    for(var i=0;i<len;i++){
      if(i==0){
       jsx.push(
        <a href="#"  key={i}>
        <img src={data[i].cimage}/>
        <h4>{data[i].cname}</h4>
        <p>{data[i].cnation}</p>
     </a>
       )
      }
    }
    return jsx;
   }
    //时尚
  getFashion=()=>{

    var jsx=[];
    var data=this.state.fashionList;
    var len=0;
    if(data.length>9){
      len=9;
    }else{
      len=data.length;
    }
    for(var i=0;i<len;i++){
    if(i>=1){
     jsx.push(
       <li  key={i}>
           <a href="#">
             <div>
               <img src={data[i].cimage}/>
             </div>
             <div>
               <p>{data[i].cname}</p>
               <span>{data[i].cnation}</span>
             </div>
             </a>
         </li>
     )
    }
    }

    return jsx;
  }
   //时尚的第一张图
   getTwo(){
    var jsx=[];
    var data=this.state.fashionList;
    var len=0;
    if(data.length>9){
      len=9;
    }else{
      len=data.length;
    }
    for(var i=0;i<len;i++){
      if(i==0){
       jsx.push(
        <a href="#"  key={i}>
        <img src={data[i].cimage}/>
        <h4>{data[i].cname}</h4>
        <p>{data[i].cnation}</p>
     </a>
       )
      }
    }
    return jsx;
   }

   getEnt(){
    var jsx=[];
    var data=this.state.entList;
    var len=0;
    if(data.length>6){
      len=6;
    }else{
      len=data.length;
    }
    for(var i=0;i<len;i++){
      jsx.push(
        <li key={i}>
        <a href="#" styleName="font-one">
           <div><img src={data[i].cimage}/></div>
           <div>
              <h4>{data[i].cname}</h4>
              <p>{data[i].cnation}</p>
           </div>
        </a>
     </li>
      )
    }
return jsx;
   }
  render(){
        return(
           <div  styleName="recommend">
              <Recnav></Recnav>
              <div styleName="other-wrap">
                 <div styleName="other-ent">
                   <div styleName="main_title">
                      <h2>热片推荐</h2>

                    <div styleName="clear"></div>
                   </div>

                   <div styleName="ent-left">

                   {this.getOne()}
                   </div>
                   <ul styleName="ent-right">
                   {this.getVariety()}
                 </ul>
                   <div styleName="clear"></div>
                   </div>

                 <div className="other-animation">
                 <div styleName="main_title">
                 <h2>猜你喜欢</h2>

               <div styleName="clear"></div>
              </div>
              <div styleName="ent-left">
              {this.getTwo()}
             </div>
             <ul styleName="ent-right">
                {this.getFashion()}
           </ul>
             <div styleName="clear"></div>
             </div>


             <div styleName="other-like">
             <div styleName="main_title">
                <h2>其它</h2>

               <div styleName="clear"></div>
             </div>
                 <ul>
                  {this.getEnt()}
                    <div styleName="clear"></div>
                 </ul>

             </div>
            </div>
           </div>
        )
     }
  }

export default CSSModules(Recother,styles,{allowMultiple:true});
